<template>
  <section class="group-list">
    <div class="title">
      <div class="title-left">项目列表 <button @click="shelf">重新上架</button></div>
      <div class="title-right"><button @click="release">发布项目</button><button @click="deleted">删除项目</button></div>
    </div>
    <div class="inner">
      <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px">
        <Checkbox class="list-top"
                  :indeterminate="indeterminate"
                  :value="checkAll"
                  @click.prevent.native="handleCheckAll">全选
          <span>项目信息</span>
          <span>项目类别</span>
          <span>发布时间</span>
        </Checkbox>
      </div>
      <CheckboxGroup v-model="checkid" @on-change="checkAllGroupChange">
        <ul>
          <li class="out-list clearfix" v-for="(i,k) in checkAllGroup" :key="k">
            <Checkbox :label="i.id" style="float: left">
              <div style="display: inline-block;width: 140px;height: 114px"><img  :src="$Url+i.images" alt="" style="width: 140px;height: 114px"></div>
            </Checkbox>

            <div style="float: left;">
              <ul>
                <li>
                  <span style="display: block;width:478px;float: left">标题：{{i.name}}<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                  <span >{{i.group_name}}</span>
                  <span style="margin-left: 80px">{{i.addtime}}</span>
                </li>
                <li>
                  <span style="display: block;width:478px;float: left">医院:{{i.hospital}}<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                  <span></span>
                </li>
                <li>
                                        <span>价格：<a style="color: #FE5371">{{i.nowprice}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <span>医院价格：{{i.price}}</span></span>
                  <span style="margin: 0 20px">折扣：<select name="" id=""><option value="">{{i.sale}}</option></select></span>
                  <span>数量：<input type="text" style="width: 40px;height: 20px" :value="i.num"></span>
                  <span style="margin-left: 190px"><a style="display: inline-block;width: 80px;height: 30px;background-color: #ff5b79;color: #fff;text-align: center;line-height: 30px" v-on:click.stop="fun">重新编辑</a></span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </CheckboxGroup>
    </div>
    <div style="text-align: center;margin: 20px 0"><Page :total="num" @on-change="pab" /></div>
  </section>
</template>

<script>

export default {
  name: 'ProjectList',
  components: {

  },
   data () {
      return {
          formItem: {},
          indeterminate: true,
          checkAll: false,
          checkAllGroup: [],
          checkid:[],
          id:[],
          selected:0,
          ids:'',
          page:1,
          num:0
      }
   },
    created () {
      this.getinfo();
    },
    computed: {

    },
    methods: {
        pab (page) {
            this.page = page
            this.getinfo()
        },
        fun () {

        },
        shelf () {
            let _this = this
            _this.ids= _this.checkid.join(',');
            _this.$post('/api/goods/shangGoods',
                {
                    ids:_this.ids
                },function (res) {
                    _this.$message.success(res.msg);
                    _this.getinfo()
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        release () {
            this.$router.push({path:'/my/project/list'})
        },
        deleted () {
            let _this = this
            _this.ids= _this.checkid.join(',');
            _this.$post('/api/goods/delgoods',
                {
                    ids:_this.ids
                },function (res) {
                    _this.$message.success(res.msg);
                    _this.getinfo()
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        getinfo () {
            let _this = this
            _this.$post('/api/goods/getXiaGoodsList',
                {
                    token:_this.$token,
                    statu:2,
                    page:_this.page,
                    num:10
                },function (res) {
                    _this.num = parseInt(res.data.length)
                    _this.checkAllGroup = res.data
                    _this.checkAllGroup.forEach(function (i) {
                    _this.id.push(i.id)
                    })
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        handleCheckAll () {
            if (this.indeterminate) {
                console.log(this.indeterminate)
                this.checkAll = true;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.checkid =this.id;
            } else {
                this.checkid = [];
            }
        },
        checkAllGroupChange (data) {
            if (this.checkid.length === this.checkAllGroup.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = false;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }
    }
}

</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .group-list{
      border: 1px solid @border-color;
      padding: 15px;
      .title{
          color: #ff5371;
          font-size: 18px;
          padding-bottom: 8px;
          overflow: hidden;
          border-bottom: 1px solid @theme-color-dark;
          margin-bottom: 2px;
      }
      .title-left{
          float: left;
          font-size: 18px;
      }
      .title-right{
          float: right;
      }
      .title-right button{
          margin-right: 10px;
      }
      .title button{
          width: 74px;
          height: 31px;
          background-color: #ff5371;
          border-radius: 4px;
          color: #fff;
          outline: none;
          border: none;
          font-size: 14px;
          border-bottom: 2px solid red;
      }

      .out-list{
          /*height: 115px;*/
          padding: 10px;
          border-bottom: 1px dashed #eeeeee;
      }
      .out-list ul li:first-child{
          background-color: #eeeeee;
      }
      .ivu-icon[data-v-5e279927]{
          color: #FE5371;
      }
      .out-list ul li{
          width: 760px;
          height: 30px;
          padding-left: 10px;
          line-height: 30px;
      }
      .out-list ul li:first-child{
          background-color: #F8F8F8;
      }
      .ivu-icon[data-v-061bc96f]{
          color: #FE5371;
      }
      .list-top{
          line-height: 30px;
          width: 946px;
          height: 30px;
          padding-left: 10px;
          background-color: #F5EEEF;
      }
      .list-top span{
          margin: 0 246px;
      }
      .list-top>:nth-child(3){
          margin: 0 70px;
      }
      .list-top>:nth-child(4){
          margin: 0 56px;
      }
  }

</style>
